<template>
  <div class="app-container bg-white">
    <div class="userInfo">
      <el-row>
        <el-col :span="4" v-if="userInfo.headUrl">
          <div><img :src="baseImgUrl + userInfo.headUrl"></div>
        </el-col>
        <el-col :span="userInfo.headUrl ? 20 : 24">
          <el-row>
            <el-col :span="6"><div>昵称：{{userInfo.name}}</div></el-col>
            <el-col :span="6"><div>手机号：{{userInfo.phone}}</div></el-col>
            <el-col :span="6"><div>等级：{{userInfo.levelName}}</div></el-col>
            <el-col :span="6"><div>邀请人数：{{userInfo.inviteNum}}</div></el-col>
          </el-row>
          <el-row class="margin_top_20">
            <el-col :span="6"><div>消费次数：{{userInfo.consumeNum}}</div></el-col>
            <el-col :span="6"><div>消费金额：{{userInfo.consumeMoney}}</div></el-col>
            <el-col :span="6"><div>成为分享客时间：{{userInfo.createTime}}</div></el-col>
            <el-col :span="6"><div>状态：{{userInfo.status|changeStatus}}</div></el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
    <div>
      <div class="font-size--xs font-weight--lg">收益信息（元）</div>
      <br>
      <el-row>
        <el-col :span="6"><div>累计收益：{{userInfo.shareMoney+userInfo.subordinateMoney}}</div></el-col>
        <el-col :span="6"><div>未分账金额：{{userInfo.refundingMoney}}</div></el-col>
      </el-row>
      <br>
      <div class="flex">
        <el-card class="box-card margin_right_20">
          <div slot="header" class="clearfix">
            <span>分享商品信息</span>
          </div>
          <div><p>累计分享成交订单：{{userInfo.turnover}}</p></div>
          <div><p>累计分享成交金额：{{userInfo.totalMoney }}</p></div>
          <div><p>分享获得收益：{{userInfo.shareMoney}}</p></div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>邀请信息</span>
          </div>
          <div><p>邀请人数：{{userInfo.inviteNum}}</p></div>
          <div><p>下级累计贡献收益：{{userInfo.subordinateMoney }}</p></div>
        </el-card>
      </div>
    </div>

    <br>
    <el-tabs v-model="currentTabIndex">
      <el-tab-pane :label="item.name" :name="item.index" v-for="(item, index) in tabData" :key="index"></el-tab-pane>
    </el-tabs>
    <invitation-table v-if="currentTabIndex == 2" @show="showDetail" />
    <separate-table v-else :type="refundType" />

    <el-dialog title="详情" :visible.sync="isShowDialog" width="900px" >
      <separate-table :inviteId="inviteeId" />
    </el-dialog>
  </div>
</template>

<script>
  import SeparateTable from '@/views/shared-management/components/separateTable';
  import InvitationTable from  '@/views/shared-management/components/invitationTable';
  import { GetSharedSharerOneDetail } from '@/views/shared-management/services/index';
  export default {
    components:{
      SeparateTable,
      InvitationTable
    },
    data() {
      return {
        userInfo: {},
        baseImgUrl: process.env.VUE_APP_FILE_URL,
        tabData: [
          { name: '分账明细', value: '0', type: '' },
          { name: '分享明细', value: '1', type: 1 },
          { name: '邀请明细', value: '2', type: '' }
        ],
        refundType: '',
        inviteeId: '',
        isShowDialog: false,
        currentTabIndex: 0
      }
    },
    filters: {
      changeStatus(val) {
        switch (val) {
          case 1:
            return '通过';
          case 2:
            return '拒绝';
          default:
            return '待审核';
        }
      }
    },
    watch: {
      currentTabIndex(newValue) {
        this.refundType = this.tabData[newValue].type;
      }
    },
    created() {
      this.getDetail();
    },
    methods: {
      getDetail() {
        GetSharedSharerOneDetail({ userId: this.$route.query.id })
        .then(data => {
          if (data.code == 200) {
            this.userInfo = {
              ...data.data.userAccount,
              ...data.data.user,
              ...data.data.customerInfo,
              'levelName': data.data.levelName
            }
          }
        })
      },
      showDetail(event) {
        this.inviteeId = event;
        this.isShowDialog = true;
      }
    }
  }
</script>

<style lang="scss" scoped>
.app-container {

  .userInfo {

    img {
      width: 80px;
      height: 80px;
      border-radius: 40px;
    }
  }
}

.box-card {
  min-width: 420px;
}
</style>
